<template>
<div class="map">
  <div id="chooseMap"></div>
</div>
</template>

<script>
import {mapGetters} from "vuex";
export default {
  name: "ChoosePosition",
  emits: ['dialogVisibleMap'],
  props:['latitude','longitude','jobAddress'],
  data() {
    return {
      center: {lng: 0, lat: 0},
      zoom: 3,
    }
  },
  methods:{
    initMap1 () {
      // 定义地图中心点坐标
      var center = new window.TMap.LatLng(this.latitude,this.longitude)
      // 定义map变量，调用 TMap.Map() 构造函数创建地图
      var map = new window.TMap.Map(document.getElementById('chooseMap'), {
        center: center, // 设置地图中心点坐标
        zoom: 17.2, // 设置地图缩放级别
        pitch: 43.5, // 设置俯仰角
        rotation: 45 // 设置地图旋转角度
      })
      var marker = new TMap.MultiMarker({
        id: 'marker-layer',
        map: map,
        styles: {
          // mark样式
          "marker": new TMap.MarkerStyle({
            "width": 25,
            "height": 38,
            "anchor": { x: 12, y: 32 },
          })
        },
        geometries: [{
          "id": 'demo1',
          "styleId": 'marker',
          "position": new TMap.LatLng(this.latitude, this.longitude),
          "properties": {
            "title": this.jobAddress,
            "address": this.jobAddress,
          }
        }]
      });
      //初始化infoWindow
      var infoWindow = new TMap.InfoWindow({
        map: map,
        position: new TMap.LatLng(this.latitude, this.longitude),
        offset: { x: 0, y: -32 }, //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
      });
      infoWindow.close();//初始关闭信息窗关闭
      //监听标注点击事件
      marker.on("click", function (evt) {
        console.log(evt)
        //设置infoWindow
        infoWindow.open(); //打开信息窗
        infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
        infoWindow.setContent(`<div style="white-space:
          nowrap;margin:10px;color:#000;text-align:left;">
          <p style="font-size:16px;">${evt.geometry.properties.title}</p>
           </div>`);//设置信息窗内容
      })

      console.log(map)
      console.log(window)
    },
  },
  computed:{
    ...mapGetters(['user'])
  },
  mounted() {
    this.initMap1()
  }
}

</script>

<style scoped lang="scss">
.map{
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 5px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  margin-top: 20px;

  #chooseMap{
    /*地图(容器)显示大小*/
    width:100%;
    height:360px;
  }

}
</style>
